<template>
  <div class="page">
    <div class="mask-box"></div>
    <div class="calendar-box">
      <div class="header-box">
        <img src="../assets/img/ic/left_calendar@2x.png" alt="" v-on:click.stop.prevent="preCalendarData()">
        <span>{{selectedYear}}-{{showMonth}}</span>
        <img src="../assets/img/ic/right_calendar@2x.png" alt="">
      </div>
      <div class="main-box vux-1px-b">
        <table>
          <thead>
            <tr>
              <th>日</th><th>一</th><th>二</th><th>三</th>
              <th>四</th><th>五</th><th>六</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in calendarDataList" :key="index">
              <td v-for="(items,index) in item" :key="index">
                <span :class="{active : (items!='' && items==selectedDay)}" @click="chooseDay($event)">{{items}}</span> 
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="footer-box">取消</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return{
        calendarDataList: [],
        selectedDay: '', //被选择的日期
        selectedMonth: '', //被选择的月份
        selectedYear: '', //被选择的年份
        showMonth: '', //显示的月份
      }
    },
    created(){
      this.getCalendarData(null)
    },
    methods: {
      chooseDay(e){
        // console.log(e.target.innerHTML)
        this.selectedDay = e.target.innerHTML
      },
      preCalendarData(){ //前一个月
        let _this = this
        let d = new Date()
        console.log('month:',_this.selectedMonth)
        if(_this.selectedMonth==1){
          return
        }
        if(_this.selectedMonth>1 && _this.selectedMonth<=12){
          _this.selectedMonth--
        }
        _this.getCalendarData(new Date(d.getFullYear(),_this.selectedMonth-1,d.getDate()))
      },
      //获取日历数据
      getCalendarData(param){
        let nowDate = param==null ? new Date() : param
        this.selectedDay = nowDate.getDate() //当天日期号
        this.selectedYear = nowDate.getFullYear() //年份
        this.selectedMonth = nowDate.getMonth()+1
        this.showMonth =  this.selectedMonth < 10 ? '0'+ this.selectedMonth : this.selectedMonth
        let d = new Date(nowDate.getFullYear(),nowDate.getMonth()+1,0)
        let days = d.getDate() //月份天数
        //每个月的一号是星期几
        let week = new Date(nowDate.getFullYear()+'-'+(nowDate.getMonth()+1)+'-1').getDay();
        this.calendarDataList = []
        let oneRow = []
        for(let i = week; i>0; i--){
          oneRow.push('')
        }
        for(var j = 0; j<=6-week; j++){
          oneRow.push(j+1)
        }
        this.calendarDataList.push(oneRow)
        j++
        let arr = []
        let count = 0
        for(let k = j; k<=days; k++){
          if(count>0){
            if(count%7==0){
              this.calendarDataList.push(arr)
              arr = []
            }
          }
          arr.push(k)
          count++
        }
        if(arr.length>0){
          this.calendarDataList.push(arr)
        }
      }
    }
  }
</script>

<style lang="less">
.mask-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: @maskColor;
  z-index: 10;
}
.calendar-box{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 20;
  .header-box{
    padding: 0 10px;
    height: 82px;
    display: flex;
    justify-content: space-between;
    align-items:center;
    background: #f3f2f2;
    img{
      width: 48px;
      height: 48px;
      cursor: pointer;
    }
    span{
      font-size: 32px;
      color: #262626;
    }
  }
  .main-box{
    height: 680px;
    table{
      width: 100%;
      thead{
        tr th{
          width: 107px;
          height: 107px;
          font-size: 26px;
          color: #696969;
          letter-spacing: 1px;
        }
      }
      tbody{
        tr td{
          position: relative;
          width: 100px;
          height: 85px;
          span{
            display: block;
            line-height: 85px;
            text-align: center;
            font-size: 30px;
            color: #262626;
            &.active{
              color: #ffffff;
              &:before{
                content: " ";
                background: @blue;
                width: 54px;
                height: 54px;
                border-radius: 28px;
                display: inline-block;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -28px;
                margin-top: -30px;
                z-index: -1;
              }
              &:after{
                content: " ";
                background: @blue;
                display: inline-block;
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 8px;
                bottom: 0;
                left: 50%;
                margin-left: -5px;
              }
            }
          }
        }
      }
    }
  }
  .footer-box{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 34px;
    color: #686868;
    letter-spacing: 1.1px;
  }
}
</style>
